<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/home.css">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
</head>
<body>

<div id="header">
    <div class="nav">
        <a href="#" class="logo">Lee Blog</a>
        <div id="nav-btn" class="btn">
            <i id="btn" class="layui-icon layui-icon-addition"></i>
        </div>
        <ul class="nav-bar">
            <li class="active"><a href="home.html" th:href="@{/home}">首页</a></li>
            <li><a href="technology.html" th:href="@{/technology}">技术</a></li>
            <li><a href="life.html" th:href="@{/life}">杂记</a></li>
            <li><a href="time.html" th:href="@{/time}">时间轴</a></li>
            <li><a href="message.html" th:href="@{/message}">留言</a></li>
            <li><a href="about.html" th:href="@{/about}">关于我</a></li>
        </ul>
    </div>
</div>

<div class="layui-fluid btn-nav">
    <ul>
        <li class="active"><a href="home.html" th:href="@{/home}">首页</a></li>
        <li><a href="technology.html" th:href="@{/technology}">技术</a></li>
        <li><a href="life.html" th:href="@{/life}">杂记</a></li>
        <li><a href="time.html" th:href="@{/time}">时间轴</a></li>
        <li><a href="message.html" th:href="@{/message}">留言</a></li>
        <li><a href="about.html" th:href="@{/about}">关于我</a></li>
    </ul>
</div>


<div class="layui-row" style="padding: 0px 20px;">
    <div class="layui-col-sm7 layui-col-sm-offset1">
        <i class="layui-icon layui-icon-speaker"> 通知：个人博客1.0版本上线啦~</i>
    </div>
    <div class="layui-col-sm3" style="text-align: right;">
        <a href="javascript:()"><img src="images/Connect_logo_7.png" alt=""></a>
    </div>
</div>



<div id="banner-box" class="layui-row layui-anim layui-anim-up">
    <div id="banner-height" class="layui-col-sm7 layui-col-sm-offset1">
        <div id="banner" class="layui-carousel">
            <div carousel-item>
                <div><a href="#"><img src="images/banner1.jpg" alt="1" width="100%" height="100%"></a></div>
                <div><a href="#"><img src="images/banner2.jpg" alt="1" width="100%" height="100%"></a></div>
                <div><a href="#"><img src="images/banner3.jpg" alt="1" width="100%" height="100%"></a></div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 layui-anim layui-anim-up">
        <div id="myInfo">
            <div class="logo">
                <img src="images/logo.png" alt="logo" width="100px">
            </div>
            <h1>Lee Blog</h1>
            <i class="layui-icon layui-icon-location"> 湖北武汉</i>
            <i class="layui-icon layui-icon-male"> 男</i><br>
            <i class="layui-icon layui-icon-user"> 在校学生</i>
            <i class="layui-icon layui-icon-face-surprised"> 22</i>
        </div>
    </div>
</div>

<div id="main" class="layui-fluid">
    <div class="layui-row">
        <div id="main-left" class="layui-col-sm7 layui-col-sm-offset1">

            <div class="article-item layui-anim layui-anim-up" th:each="article:${homeArticle}">
                <a href="" th:href="@{/articleDetail(id=${article.id})}"><h2 th:text="${article.title}">Java从入门到精通</h2></a>
                <p th:text="${article.desc}">全网最好的Java入门课程，让你从年头学到年尾！</p>
                <i class="layui-icon layui-icon-time" th:text="${article.time}"> 2020年3月24日</i>
                <i class="layui-icon layui-icon-template-1" th:text="${article.type}"> 技术</i>
                <i class="layui-icon layui-icon-note" th:text="${article.label}"> Java</i>
            </div>
            <div class="page" th:if="${totalPage} > 1">
                <a th:href="@{/home(page = ${page} - 1)}" th:if="${page} != 1">上一页</a>
                <span class="pageSpan">
                <span th:text="${page}">1</span> / <span th:text="${totalPage}">4</span>
                </span>
                <a th:href="@{/home(page = ${page} + 1)}" th:if="${page} != ${totalPage}">下一页</a>
            </div>
        </div>
        <div id="main-right" class="layui-col-sm3">
            <div class="box layui-anim layui-anim-up">
                <i class="layui-icon layui-icon-read"> 最新发布</i><br>
                <div th:each="newArticle : ${newArticles}">
                    <h3><a href="" th:href="@{/articleDetail(id=${newArticle.id})}" th:text="${newArticle.title}">Java从入门到精通</a></h3>
                </div>
            </div>
            <div class="box layui-anim layui-anim-up">
                <i class="layui-icon layui-icon-dialogue"> 最近留言</i><br>
                <div th:each="message : ${newMessage}">
                    <h2 th:text="${message.name}">刘德华</h2>
                    <p th:text="${message.content}">全网最好的Java入门课程，让你从年头学到年尾！全网最好的Java入门课程，让你从年头学到年尾！</p>
                </div>
            </div>
            <div class="box layui-anim layui-anim-up">
                <i class="layui-icon layui-icon-console"> 网站信息</i>
                <h1>网站已运行<span id="day">365</span>天</h1>
                <h1>共有<span th:text="${uv}">365</span>人来看过</h1>
                <h1>总计发表<span th:text="${articleCount}">365</span>篇文章</h1>
                <h1>共有<span th:text="${messageCount}">365</span>条留言</h1>
            </div>
        </div>
    </div>
</div>

<div id="footer"><a href="http://www.beian.miit.gov.cn/">Copyright © 2020 LeeBlog 鄂ICP备20013163号</a></div>


<script src="js/jquery-3.4.1.js"></script>
<script src="js/function.js"></script>
<script src="layui/layui.js"></script>
<script src="js/home.js"></script>
<script src="js/jquery.rotate.min.js"></script>
</body>
</html>